<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    //先把坐标移动到canvas标签的中心
    ctx.translate(300,300);
    //矩形的宽度和高度
    var widthandheigth=1
    setInterval(function(){
        ctx.rotate(degToArc(10))
        widthandheigth+=0.1

//    随机颜色 var random=Math.round(Math.random()*255);
        ctx.strokeStyle="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"
        ctx.strokeRect(0,0,widthandheigth,widthandheigth)

    },100)
function degToArc(num){
    return Math.PI/180*num;
}

</script>

</body>
</html>